<template>
	<div>
		<Card :bordered="false" dis-hover class="ivu-mt pt10">
			<Form ref="formValidate" :model="formValidate" :label-width="labelWidth" :label-position="labelPosition">
				<Row type="flex" :gutter="24" style="margin-left: 20px;">
					<Col>
					<FormItem :label="$t('page.stock.select_date')+'：'">
					  <DatePicker type="month" :locale="customLocale" placeholder="Select month" @on-change="onchangeTime" style="width: 200px;margin-right: 20px;" />
					</FormItem>
					</Col>
					
					<Col>
					<Button type="primary" @click="search" icon="md-search"></Button>
					</Col>

				</Row>
			</Form>
		</Card>

		<Card :bordered="false" dis-hover class="ive-mt tablebox">
			<div class="product_tabs tabbox">
				<Tabs v-model="formValidate.join_type" @on-click="onClickTab">
					<TabPane :label="$t('page.activity.join_now')" name="1" />
					<TabPane :label="$t('page.activity.registered')" name="2" />
					<TabPane :label="$t('page.activity.history')" name="3" />
				</Tabs>
			</div>
			<div class="btnbox"></div>
			<div class="table">
				<Table ref="table" :columns="columns" :data="tableList" class="ivu-mt" :loading="loading"
					:no-data-text="$t('page.product.no_data')" :no-filtered-data-text="$t('page.product.no_filtering')">
					<template slot-scope="{ row }" slot="auto_generate">
						<div v-if="row.auto_generate == 1">自动生成</div>
						<div v-else>手动生成</div>
					</template>
					<template slot-scope="{ row, index }" slot="name">
						<span >{{row.name+' '+$t('page.activity.activity_name')}}</span>
					</template>
					<template slot-scope="{ row, index }" slot="type">
						<span v-if="row.type == 1">{{$t('page.activity.new')}}</span>
						<span v-else>{{$t('page.activity.promotion')}}</span>
					</template>
					<template slot-scope="{ row, index }" slot="status">
						<span v-if="row.status == 1">{{$t('page.activity.sign_up')}}</span>
						<span v-else-if="row.status == 2">{{$t('page.activity.activity')}}</span>
						<span v-else-if="row.status == 3">{{$t('page.activity.end')}}</span>
						<span v-else>{{$t('page.activity.no_start')}}</span>
					</template>
					<template slot-scope="{ row, index }" slot="action">
						<div v-if="row.status == 1">
							<a @click="joinIn(row)">{{$t('page.activity.participate')}}</a>
						</div>
						<div v-else>
							<a @click="joinIn(row)">{{$t('page.stock.view')}}</a>
						</div>
					</template>
				</Table>
				<div class="acea-row row-right page">
					<Page :total="total" :current.sync="formValidate.page" @on-change="pageChange"
						:page-size="formValidate.limit" />
				</div>
			</div>
		</Card>
		<commission-details ref="commission"></commission-details>
	</div>
</template>

<script>
	import exportExcel from '@/utils/newToExcel.js';
	import zhCNiView from 'view-design/dist/locale/zh-CN';
	import {
		customersListApi,
		exportfundRecordApi,
		activityListApi
	} from '@/api/capital';
	import timeOptions from '@/utils/timeOptions2';
	export default {
		name: 'bill',
		components: {},
		data() {
			return {
				total: 0,
				loading: false,
				tab: '1',
				customLocale: zhCNiView,
				tableList: [],
				options: timeOptions,
				formValidate: {
					join_type: "1",
					name: '',
					phone: '',
					date:"",
					page: 1,
					limit: 20,
				},
				timeVal: [],
				fromList: {
					title: '选择时间',
					custom: true,
					fromTxt: [{
							text: '全部',
							val: ''
						},
						{
							text: '昨天',
							val: 'yesterday'
						},
						{
							text: '今天',
							val: 'today'
						},
						{
							text: '本周',
							val: 'week'
						},
						{
							text: '本月',
							val: 'month'
						},
						{
							text: '本季度',
							val: 'quarter'
						},
						{
							text: '本年',
							val: 'year'
						},
					],
				},
			};
		},
		computed: {
			labelWidth() {
				return this.isMobile ? undefined : 120;
			},
			labelPosition() {
				return this.isMobile ? 'top' : 'left';
			},
			columns() {
				return [{
						title: "ID",
						key: "id",
						width: 80,
					},
					{
						title: $t('page.activity.active_name'),
						slot: "name",
						minWidth: 100,
					},
					{
						title: $t('page.activity.type'),
						slot: "type",
						minWidth: 100,
					},
					{
						title: $t('page.activity.start'),
						key: "start_time_str",
						// sortable: true,
						minWidth: 100,
					},
					{
						title: $t('page.activity.end'),
						key: "end_time_str",
						minWidth: 100,
					},
					{
						title: $t('page.activity.status'),
						slot: "status",
						minWidth: 100,
					},
					{
						title: $t('page.activity.requirement'),
						key: 'requirements',
						minWidth: 300, // 适当调整宽度
						render: (h, {
							row
						}) => {
							return h(
								'Tooltip', {
									props: {
										content: '', // 不使用默认 content，改为 slot
										placement: 'top',
									},
									scopedSlots: {
										content: () => h(
											'div', {
												style: {
													maxHeight: '200px', // 限制高度
													overflowY: 'auto',
													maxWidth: '600px', // 可选：防止一行过长
													whiteSpace: 'pre-wrap', // 换行
												}
											},
											row.requirements || $t('page.product.no_data')
										)
									}
								},
								[h('span', {
									style: {
										display: 'inline-block',
										maxWidth: '200px',
										whiteSpace: 'nowrap',
										overflow: 'hidden',
										textOverflow: 'ellipsis',
									}
								}, row.requirements || $t('page.product.no_data'))]
							)
						}
					},
					{
						title: $t('page.activity.operation'),
						slot: "action",
						fixed: "right",
						minWidth: 150,
					},
				]
			}
		},
		watch: {
			tab: {
				handler() {
					this.formValidate.page = 1;
					this.getList();
				},
				immediate: true,
			},
		},
		methods: {
			// 参与活动
			joinIn(row) {
				// console.log(this.roterPre + '/activityInfo/' + row.id)
				this.$router.push({
					path: '/supplier/activity/activityInfo/' + row.id
				})
			},
			allReset() {
				this.formValidate.name = '';
				this.formValidate.phone = '';
				this.getList();
			},
			//搜索
			search() {
				this.formValidate.page = 1;
				this.getList();
			},
			onClickTab(e) {
				this.tableList = []
				this.tab = e;
			},
			// 时间格式化方法
			// 原生 JS 格式化
			formatTimeNative(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},
			getList() {
				this.loading = true;
				let data = {
					join_type: this.tab,
					date:this.formValidate.date,
					name: this.formValidate.name,
					phone: this.formValidate.phone,
					page: this.formValidate.page,
					limit: this.formValidate.limit,
				};
				activityListApi(data)
				  .then(async (res) => {
				    let data = res.data;
				    this.tableList = data.list;
				    this.total = res.data.count;
				    this.loading = false;
				  })
				  .catch((res) => {
				    this.loading = false;
				    this.$Message.error(res.msg);
				  });
			},
			// 选择时间
			selectChange(tab) {
				this.formValidate.page = 1;
				this.formValidate.data = tab;
				this.timeVal = [];
				this.getList();
			},

			// 具体日期
			onchangeTime(e) {
			  this.timeVal = e;
			  this.formValidate.date = this.timeVal;
			  console.log(this.formValidate.date)
			  this.getList();
			},
			//分页
			pageChange(status) {
				this.formValidate.page = status;
				this.getList();
			},
			// 账单详情
			Info(row) {
				this.$refs.commission.modals = true;
				this.$refs.commission.getList(row.ids);
			},
			//下载
			async download(row) {
				let [th, filekey, data, fileName] = [
					[],
					[],
					[], ''
				];
				let excelData = {
					ids: row.ids,
					page: 1
				};
				let lebData = await this.getExcelData(excelData);
				if (!fileName) {
					fileName = lebData.filename;
				}
				if (!filekey.length) {
					filekey = lebData.filekey;
				}
				if (!th.length) {
					th = lebData.header;
				}
				data = [...data, ...lebData.export];
				exportExcel(th, filekey, fileName, data);
			},
			getExcelData(excelData) {
				return new Promise((resolve) =>
					exportfundRecordApi(excelData).then((res) => resolve(res.data))
				);
			},
		},
	};
</script>

<style scoped lang="less">
	/deep/.ivu-page-header,
	/deep/.ivu-tabs-bar {
		border-bottom: 1px solid #ffffff;
	}

	/deep/.ivu-card-body {
		padding: 0;
	}

	/deep/.ivu-tabs-nav {
		height: 45px;
	}

	/deep/.ivu-tabs-bar {
		margin-bottom: 0px !important;
		border-bottom: 1px solid #e9e9e9 !important;
	}

	.tabbox {
		padding: 16px 20px 0px;
	}

	.box {
		padding: 20px;
		padding-bottom: 1px;
	}

	.tablebox {
		margin-top: 15px;
		padding-bottom: 10px;
	}

	.btnbox {
		padding: 20px 0px 0px 30px;

		.btns {
			width: 99px;
			height: 32px;
			background: #1890ff;
			border-radius: 4px;
			text-align: center;
			line-height: 32px;
			color: #ffffff;
			cursor: pointer;
		}
	}

	.table {
		padding: 0px 30px 15px 30px;
	}

	.search {
		width: 86px;
		height: 32px;
		background: #1890ff;
		border-radius: 4px;
		text-align: center;
		line-height: 32px;
		font-size: 13px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		cursor: pointer;
	}

	.reset {
		width: 86px;
		height: 32px;
		border-radius: 4px;
		border: 1px solid rgba(151, 151, 151, 0.36);
		text-align: center;
		line-height: 32px;
		font-size: 13px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		font-weight: 500;
		color: #515a6e;
		// background: #2D8CF0;

		cursor: pointer;
	}

	.ivu-form-item-label {
		width: 40px;
		;
	}

	.address-link {
		color: #2d8cf0;
		text-decoration: underline;
		cursor: pointer;
		transition: color 0.3s;
	}

	.address-link:hover {
		color: #57a3f3;
		text-decoration: none;
	}

	.gray-tab {
		color: #999 !important;
	}
</style>